<!--
 * @Author: caihongtai caihongtai
 * @Date: 2025-02-09 14:03:33
 * @LastEditors: caihongtai caihongtai
 * @LastEditTime: 2025-03-30 23:04:09
 * @FilePath: /ai-interview-vue/src/views/Profile/interviews/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <nav-bar title="面试记录" />
    <div class="interviews-container">
        <common-list :request="fetchJobsList" :transform="transformData" ref="listRef" :show-finished-text="true"
            finished-text="已经到底啦～" empty-text="暂无面试记录" :showFinishedText="false">
            <template #default="{ list }">
                <div class="result-container" v-for="item in list" :key="item.id">
                    <div class="result-card">
                        <div>面试得分：<span class="score">{{ item.average_score }}</span></div>
                        <div class="position">面试岗位：<span class="grey-text">{{ item.jd_title }}</span></div>
                        <div class="date">面试时间：<span class="grey-text">{{ item.created_at }}</span></div>
                        <div class="action-buttons">
                            <van-button class="check-btn" type="primary" block
                                @click="handleView(item)">查看详细结果</van-button>
                        </div>
                    </div>
                </div>
            </template>
        </common-list>
    </div>
</template>

<script setup lang="ts">
    import { useRouter } from 'vue-router'
    import NavBar from '@/components/NavBar/index.vue'
    import { interviewApi } from '@/api/interview'
    import CommonList from '@/components/CommonList/index.vue'
    const router = useRouter()
    const listRef = ref(null)
    // 获取面试记录
    const fetchJobsList = ({ pageNum, pageSize }) => {
        return interviewApi.getResultList({
            page_num: pageNum,
            page_size: pageSize
        })
    }
    // 数据转换
    const transformData = (data) => {
        return data
    }
    onMounted(() => {
        // 触发首次加载
        console.log('111', listRef.value)
        listRef.value?.reload()
    })
    const handleView = (record) => {
        router.push({
            path: `/profile/interviews/detail`,
            query: {
                interview_record_id: record.id
            }
        })
    }
</script>

<style lang="scss" scoped>
    .interviews-container {
        min-height: 100vh;
        background: #fff;

        .result-container {
            background: rgba(242, 243, 245, 1);
            padding: 12px;
            margin: 12px;
            border-radius: 20px;
        }

        .result-card {
            width: 100%;
            border-radius: 12px;
            background: rgb(255, 255, 255);
            padding: 16px;
            font-size: 17px;
            color: rgba(29, 33, 41, 1);

            .score {
                font-size: 32px;
                font-weight: 700;
                color: rgba(22, 93, 255, 1);
            }

            .grey-text {
                color: rgba(134, 144, 156, 1);
            }
        }

        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;

            .restart-btn {
                background: #f5f5f5;
                color: #333;
            }
        }
    }
</style>